<template>
	<div>
		<van-nav-bar title="" left-arrow right-text="发布" @click-left="onClickLeft" @click-right="onClickRight" />
		<van-field v-model="content" rows="4" autosize type="textarea" maxlength="250" placeholder="这一刻的想法..."
			show-word-limit />
		<van-field name="uploader" label="图片上传">
			<template #input>
				<van-uploader v-model="uploader" :max-count="9" :after-read="afterRead" />
			</template>
		</van-field>
	</div>
</template>

<script>
	import axios from '../utils/request'
	import {
		Toast
	} from 'vant';
	export default {
		computed: {

		},
		data() {
			return {
				content: '',
				uploader: [],
			}
		},
		mounted() {

		},
		methods: {
			onClickLeft() {
				this.$router.back()
			},
			// 选择图片后上传. 此时可以自行将文件上传至服务器
			afterRead(file) {
			
				file = file.file //这个是图片
				let data = new FormData();
				file.status = 'uploading'
				file.message = "上传中" //用来显示UI界面的
				data.append("file", file);//要上传的文件
				data.append("type", 2)
				axios
					.post('/uploadFile', data)
					.then(response => {
						if (response.data.code == 0) {
							file.status = 'done'//上传成功，改成done，就不会转圈圈了
							file.url = response.data.data
						} else {
							file.status = 'failed'
							file.message = "失败"
						}
					})


			},
			//发布
			onClickRight() {
				Toast.loading({
					message: '发布中...'
				});
				let arr = []
		
				for (const img of this.uploader) {
					arr.push(img.file.url)
				}
				var images = JSON.stringify(arr)
				
				axios.post('/circle/add', {
						// images,
						// content
						images:images,
						content:this.content
					})
					.then(response => {

							this.$router.back()
							Toast.success(response.data.msg);


					})
					.catch(error => {
						console.log(error.response);
					});
			},

		}
	}
</script>

<style>
</style>